'use strict';
import { createElement, Component, render } from 'rax';
import { View, Text, ScrollView, RefreshControl,Layout,Dialog,Button,Env  } from 'nuke';
import Shopline from '$components/shopline/';
import Countdown from '$components/countdown/';
import Item from '$components/items_01/';
import G from '$util/global';
import { Http } from '$util/index';
import styles from './container.less';
const { appInfo } = Env;
const { MultiRow ,Grid,Col}  = Layout;

class Index extends Component {
    constructor() {
        super();
        this.state={
            isRefreshing: false,
            refreshText: '↓ 下拉刷新',
            data:[],
			countdown:3,
			countdownId:0
        }
    }
	componentDidMount(){
		var _self = this;
		Http.fetch({
            name:'interface.page.getinfo',
            data:{}
        }).then(function(res){
			_self.setState({data:res.data});
        });
		this.refs.modal1.show();
	}
    getViews(){
        let doms=[];
        this.state.data.map((item,index)=> {
            doms.push(
				<Item
					item={item}
					notice="仅限30分钟"
					showPrice={false}
				/>
            );
        });

        return doms;
    }

    handleRefresh=()=>{
        this.setState({
            isRefreshing: true,
            refreshText: '加载中',
        });
        //mock ajax
		
		var _self = this;
		Http.fetch({
            name:'interface.page.getinfo',
            data:{}
        }).then(function(res){
			 _self.setState({
                isRefreshing: false,
                data: res.data.concat(_self.state.data),
                refreshText: '↓ 下拉刷新',
				countdown:30
            });
        });
    }
    loadmore = ()=>{
        // 底部加载更多
		var _self = this;
		Http.fetch({
            name:'interface.page.getinfo',
            data:{}
        }).then(function(res){
			_self.setState({
				data: _self.state.data.concat(res.data),
			});
        });
       
    }
	showModal = () => {
        this.refs.modal1.show();
    }
    hideModal = () => {
        this.refs.modal1.hide();
        this.refs.done.hide();
    }
    hideModalAndConfirm = () =>{
		this.countdownRun();
        this.refs.modal1.hide();
    }
    onMaskPress = (param) => {
        this.refs.modal1.hide();
    }
	countdownRun = ()=>{
		let _self = this;
		if(_self.state.countdownId){
			clearInterval(_self.state.countdownId);
		}
		let i = setInterval(function(){
			if(_self.state.countdown==0){
				clearInterval(_self.state.countdownId);
				_self.refs.done.show();
			}
			_self.setState({countdown:_self.state.countdown-1});
		},1000);
		_self.setState({countdownId:i});
	}
    render() {
		var self=this;
        return (
            <ScrollView ref="vscroller" style={styles.vscroller} onEndReachedThreshold={1} onEndReached={this.loadmore}>
                <RefreshControl refreshing={this.state.isRefreshing} style={[styles.itemRefresh]} onRefresh={this.handleRefresh}>
                    <Text style={{fontSize:"28rem",color:"#3089dc"}}>{this.state.refreshText}</Text>
                </RefreshControl>
				<Dialog ref="modal1" duration={1000} contentStyle={styles.modalStyle}  onMaskPress={this.onMaskPress}>
                    <View style={styles.body}>
                        <View style={styles.head}><Text style={styles.textHead}>倒计时折扣</Text></View>
                        <View style={styles.tips}><Text style={styles.text}>一旦点击“确定”，您将拥有30分钟的折扣时间。请确定进入本次活动，只有1次进入机会！</Text></View>
                    </View>
                    <View style={styles.footer}>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModal}>取消</Button>
                        <Text style={styles.dlgBtnSeperator}>|</Text>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModalAndConfirm}>确定</Button>
                    </View>
                </Dialog>
				<Dialog ref="done" duration={1000} contentStyle={styles.modalStyle}  onMaskPress={this.onMaskPress}>
                    <View style={styles.body}>
                        <View style={styles.head}><Text style={styles.textHead}>结束了</Text></View>
                        <View style={styles.tips}><Text style={styles.text}>真抱歉，这次活动结束了。请再接再厉，下次不要错过哦！当然，您还可以邀请别人参加，记住，机会只有1次</Text></View>
                    </View>
                    <View style={styles.footer}>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModal}>取消</Button>
                        <Text style={styles.dlgBtnSeperator}>|</Text>
                        <Button style={styles.dlgBtn} type="normal" onPress={this.hideModal}>确定</Button>
                    </View>
                </Dialog>
                <Countdown 
					countdown={this.state.countdown}
					limit={30}
					limitColor="#FFFFFF"
					img="https://img.alicdn.com/imgextra/i3/27390555/TB21fBubIH_F1JjSZFKXXbcvFXa-27390555.gif"
					/>
				<Shopline 
					icon="https://img.alicdn.com/imgextra/i2/27390555/TB2Z5ZDaISfF1JjSspbXXcSkVXa-27390555.png"
					shoptitle="一个旗舰店"
					istmall={false}
					shoplev={500}
					/>
				<Grid style={{width:'750rem',justifyContent:"center",flexWrap:"wrap"}}>
					{this.getViews()}
				</Grid>
				<Text style={{fontSize:"28rem",color:"#666666",textAlign:"center"}}>本活动由微折提供技术支持</Text>
            </ScrollView>

        )
    }
}

export default Index;

